<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="form" :model="form" >
        <el-descriptions title="产品问题" style="text-align: center" :column="3" border v-if="form.note1=='1'">
          <el-descriptions-item :contentStyle="contentStyle"label="产品名称" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.productName}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="产品型号" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
           {{form.productModel}}</el-descriptions-item>
<!--          <el-descriptions-item :contentStyle="contentStyle" label="产品图例" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
          {{form.productLegend}}</el-descriptions-item>-->
<!--          <el-descriptions-item :contentStyle="contentStyle" label="产品数量" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
           {{form.productQuantity}}</el-descriptions-item>-->
          <el-descriptions-item :contentStyle="contentStyle" label="产品编码" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
           {{form.productCode}}</el-descriptions-item></el-descriptions>
        <el-descriptions title="零件问题" style="text-align: center" :column="2" border v-if="form.note1=='2'">
          <el-descriptions-item :contentStyle="contentStyle"label="零件名称" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.partName}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="适用机型" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.applicableModel}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="零件图号" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.drawingNum}}</el-descriptions-item>
<!--          <el-descriptions-item :contentStyle="contentStyle" label="订货数量" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.orderQuantity}}</el-descriptions-item>-->
          <el-descriptions-item :contentStyle="contentStyle" label="零件编码" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.partNumber}}</el-descriptions-item></el-descriptions>
        <br/>
        <el-descriptions  title="问题详情" style="text-align: center" :column="2" border >
          <el-descriptions-item :contentStyle="contentStyle" label="问题类别" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            <dict-tag :contentStyle="contentStyle" :options="dict.type.yh_problem_category" :value="form.problemCategory" /></el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="原因分析" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >{{ form.causeAnalysis }}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="计量单位" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            <dict-tag :contentStyle="contentStyle" :options="dict.type.yh_measurement_unit" :value="form.measurementUnit" /></el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="涉及装备" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >{{form.involvedEquipment }}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="区分状态" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            <dict-tag :contentStyle="contentStyle" :options="dict.type.yh_differentiate_states" :value="form.differentiateStates" /></el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="涉及承制单位" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >{{ form.unitsInvolved }}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="军代表室" :span="1" label-class-name="my-label" :labelStyle="labelStyle">
            <dict-tag :contentStyle="contentStyle" :options="dict.type.yh_representative_office" :value="form.representativeOffice" /></el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="负责人" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >{{ form.head }}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="发生时间" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >{{form.occurrence }}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="质量问题类型" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            <dict-tag :contentStyle="contentStyle" :options="dict.type.yh_quality_issues_type" :value="form.qualityIssuesType" /></el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="简要情况" :span="3" label-class-name="my-label" :labelStyle="labelStyle" >{{form.briefSituation }}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions  title="问题处理进展" style="text-align: center" :column="1" border >
          <el-descriptions-item :contentStyle="contentStyle" label="问题整改计划时限" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >{{ form.problemRectification }}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="解决进展" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >{{ form.resolutionProgress }}</el-descriptions-item>

          <el-descriptions-item :contentStyle="contentStyle" label="备注" :span="1" label-class-name="my-label" :labelStyle="labelStyle">{{ form.remark}}</el-descriptions-item>
        </el-descriptions>

      </el-form>
      <br/>
      <div style="float:right; margin-bottom: 15px;">
        <el-button @click="viewCancel">返 回</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getIssues } from "@/api/module/dr/issues";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import watermark from "watermark-dom";
  export default {
    dicts:['yh_measurement_unit','yh_quality_issues_type','yh_problem_category','yh_differentiate_states','yh_representative_office'],
    components: {
      Treeselect
    },
    name: "Issues",
    data() {
      return {
        contentStyle:{
          'width':'200px'
        },
        form:{},
        labelStyle: { 'width': '12%','color': '#000000','text-align': 'right', },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: false,
        // 总条数
        total: 0,
        // 部门树选项
        deptOptions: undefined,
        // 合同资料表格数据
        fileList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
      };
    },
    mounted() {
      watermark.load({ watermark_txt: "  "   });
    },
    created() {
      const id = this.$route.query.id;
      if (id) {
        // 获取表详细信息

        getIssues(id).then(res => {

          this.form = res.data;
        });

      }
    },
    methods: {


      /** 关闭按钮 */
      viewCancel() {
        const id = this.$route.query.id;
        getIssues(id).then(response => {
          this.form = response.data;
        });
        const obj = { path: "/hetong/drissues", query: {id} };
        this.$tab.closeOpenPage(obj);
      }
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    }
  };
</script>






